<template>
	<view
		:style="'height:'+(custom.statusBar+custom.nvaMartom+custom.navHeight+offset)+'rpx;position:fixed;top:0rpx;'+bgType"
		class="custom">
		<view class="block custom-block"
			:style="'height:'+(custom.navHeight)+'rpx;width:100%;margin-top:'+(custom.statusBar+custom.nvaMartom)+'rpx;'">
			<view v-if="isBack" @click="backup()" :style="'color:'+color" class="iconfont icon-fanhui backup-btn">
			</view>
			<view style="height:100%" :style="'color:'+color" class="title">{{title}}</view>
			<view v-if="isBack" style="visibility: hidden;" class="iconfont icon-fanhui backup-btn"></view>
		</view>
	</view>
</template>

<script>
	import {
		getCustomNav
	} from '@/util/util.js';
	export default {
		name: 'CustomNav',
		props: {
			isBack: Boolean,
			title: {
				type: String,
				default: '乘车缴费',
			},
			color: {
				type: String,
				default: '#fff'
			},
			topBgColor: {
				type: String,
				default: 'rgba(0,0,0,0)'
			}
		},
		computed: {
			bgType() {
				const str = this.topBgColor.slice(0, 1);
				return str == '#' || str == 'r' ? `background:${this.topBgColor}` : `background-image:${this.topBgColor}`
			}
		},
		data() {
			return {
				offset: 0,
				custom: {
					statusBar: 10,
					nvaMartom: 10,
					navHeight: 80,
				},
			}
		},
		methods: {
			backup() {
				uni.navigateBack();
			}
		},
		mounted() {
			// this.custom = getCustomNav()
			// this.custom = getCustomNav()
			this.offset = 20
		}
	}
</script>

<style lang="scss" scoped>
	.custom {
		z-index: 999999;
		width: 100%;
		transition: all .3s ease;

		.custom-block {
			display: flex;
			align-items: center;

			.title {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 20rpx;
				flex-grow: 1;
				transition: all .3s ease;
			}

			.iconfont.backup-btn {
				display: flex;
				align-items: center;
				flex-grow: 0;
				margin-left: 20rpx;
				color: #fff;
				font-size: 36rpx;
				transition: all .3s ease;
			}
		}
	}
</style>